<template>
	<view class="container">
	<view class="wrap">
		<u-swiper :list="list" :title="true" :effect3d="true"></u-swiper>
	</view>
		<view class="articalBox" @click="toArtical(i._id)" v-for="i in artical">
			<view class="artical_info">
			<text class="title">{{i.title}}</text>
			<view class="author">
				<u-avatar :src="i.icon" size="mini"></u-avatar>
			</view>
			</view>
			<view class="imgBox">
				<image :src="i.cover" ></image>
			</view>
		</view>

		<u-loadmore :status="status" />
		<u-modal v-model="serveBreak" content="服务器离线中"></u-modal>
		<u-tabbar :list='this.$store.state.list' active-color='#2b85e4'></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				artical:[],
				status: 'loadmore',
				page: 0,
				serveBreak:false,
				list: [{
										image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
										title: '昨夜星辰昨夜风，画楼西畔桂堂东'
									},
									{
										image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
										title: '身无彩凤双飞翼，心有灵犀一点通'
									},
									{
										image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
										title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
									}
								]
			}
		},
		methods: {
			toArtical(id) {
				uni.navigateTo({
					url: '../artical/index?id='+id
				})
			},
			getList(){
				uni.request({
					url:'http://192.168.0.102:3000/',
					method:'GET',
					timeout:1000,
					data:{
						page:this.page
					},
					success: (res) => {
						this.artical=this.artical.concat(res.data)
						
					},
					fail: () => {
						this.serveBreak=true
					}
				})
			}
		},
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			this.getList()
			if (this.page >= 3) this.status = 'nomore';
			else this.status = 'loading';
		
		},
		onLoad() {
			this.getList()
			
		}
	
	}
</script>

<style lang="less" scoped>
	.articalBox {
		display: flex;
		height: 240rpx;
		margin: 20rpx 0;
		padding: 20rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		.artical_info {
			flex: 1;
			position: relative;
			.title{
				font-size: 30rpx;
				font-weight: bolder;
				height: 80rpx;
			}
			.author{
				position: absolute;
				bottom: 0;
			}
			
		}

		.imgBox {
	
			image{
				width: 200rpx;
				height: 200rpx;
			}
		}

	}

	.item {
		height: 400rpx;
	}
	.wrap {
			
			
		}
</style>
